<template>
    <section class="error-404-section">
        <app-header></app-header>

        <!--中间内容-->
        <div class="content">
            <div class="container">
                <div class="info">
                    <h3>Oops! ~~ 您的页面好像飞走了~</h3>
                    <p>您还需要一个漂亮的房子吗？</p>
                    <div class="not-found-info">
                        <router-link to="/USEstate">
                            <a-button type="primary"> <i class="iconfont icon-dudongbieshu"></i> 查找新房</a-button>
                        </router-link>
                        <router-link to="/News">
                            <a-button type="primary"><i class="iconfont icon-liebiaodaohang_zixun"></i> 海外新闻资讯</a-button>
                        </router-link>
                        <router-link to="/">
                            <a-button type="primary"><i class="iconfont icon-fangzi-copy"></i> 返回首页</a-button>
                        </router-link>
                    </div>
                </div>
                <img v-lazy="'/static/img/404-img1.svg'" class="error-404-img">
            </div>
        </div>

        <!--房源推荐-->
        <recommendHouse></recommendHouse>

        <!--返回顶部-->
        <BackTop :isShowHouseContrast="false"></BackTop>
    </section>
</template>

<script>
    import Header from '../../components/header.vue';//公共组件——头部
    import BackTop from '../../components/BackTop.vue';//公共组件——返回顶部
    import recommendHouse from '../../components/recommendHouse.vue'; //公共组件——推荐房源

    export default {
        data() {
            return {}
        },
        metaInfo () {
            return {
                title: '【华美优胜】对不起，您所访问的页面不存在！_华美优胜美国房产投资公司',
                meta: [
                    { vmid: 'keywords', name: 'keywords', content: '【华美优胜】对不起，您所访问的页面不存在！_华美优胜美国房产投资公司' },
                    { vmid: 'description', name: 'description', content: '【华美优胜】对不起，您所访问的页面不存在！_华美优胜美国房产投资公司' },

                ],
            }
        },
        computed: {},
        created() {
        },
        mounted() {
        },
        methods: {},
        components: {
            'app-header': Header,//公共组件——头部
            BackTop,//公共组件——返回顶部
            recommendHouse,//公共组件——推荐房源

        }
    }
</script>

<style lang="less" type="text/less">
    body {
        .error-404-section {
            .content {
                padding: 30px 0;
                background: #fff;
                position: relative;
                > .container {
                    padding: 30px;
                    text-align: center;
                    >.info {
                        position: relative;
                        z-index: 9;
                        >h3{
                            font-size: 25px;
                            font-weight: 600;
                        }
                        >p{
                            color: #869099;
                            margin: 20px 0;
                        }
                        >.not-found-info{
                            >a{
                                margin: 0 20px;
                            }
                        }
                    }
                    >.error-404-img{
                        min-height: 100px;
                        margin: 150px 0 0 0;
                    }
                }
                > .container:before {
                    content: '';
                    position: absolute;
                    top: 40px;
                    left: 0;
                    z-index: 1;
                    background-image: url("/static/img/404-img2.svg");
                    width: 100%;
                    height: 342px;
                    background-repeat: no-repeat;
                    background-position: center;
                    -webkit-animation: floating 5s ease infinite;
                    -khtml-animation: floating 5s ease infinite;
                    -moz-animation: floating 5s ease infinite;
                    -ms-animation: floating 5s ease infinite;
                    -o-animation: floating 5s ease infinite;
                    animation: floating 5s ease infinite
                }
            }
        }
    }

    @-webkit-keyframes floating {
        0% {
            -webkit-transform: translateY(0px);
            -khtml-transform: translateY(0px);
            -moz-transform: translateY(0px);
            -ms-transform: translateY(0px);
            -o-transform: translateY(0px);
            transform: translateY(0px)
        }
        50% {
            -webkit-transform: translateY(20px);
            -khtml-transform: translateY(20px);
            -moz-transform: translateY(20px);
            -ms-transform: translateY(20px);
            -o-transform: translateY(20px);
            transform: translateY(20px)
        }
        100% {
            -webkit-transform: translateY(0px);
            -khtml-transform: translateY(0px);
            -moz-transform: translateY(0px);
            -ms-transform: translateY(0px);
            -o-transform: translateY(0px);
            transform: translateY(0px)
        }
    }

    @-moz-keyframes floating {
        0% {
            -webkit-transform: translateY(0px);
            -khtml-transform: translateY(0px);
            -moz-transform: translateY(0px);
            -ms-transform: translateY(0px);
            -o-transform: translateY(0px);
            transform: translateY(0px)
        }
        50% {
            -webkit-transform: translateY(20px);
            -khtml-transform: translateY(20px);
            -moz-transform: translateY(20px);
            -ms-transform: translateY(20px);
            -o-transform: translateY(20px);
            transform: translateY(20px)
        }
        100% {
            -webkit-transform: translateY(0px);
            -khtml-transform: translateY(0px);
            -moz-transform: translateY(0px);
            -ms-transform: translateY(0px);
            -o-transform: translateY(0px);
            transform: translateY(0px)
        }
    }

    @-ms-keyframes floating {
        0% {
            -webkit-transform: translateY(0px);
            -khtml-transform: translateY(0px);
            -moz-transform: translateY(0px);
            -ms-transform: translateY(0px);
            -o-transform: translateY(0px);
            transform: translateY(0px)
        }
        50% {
            -webkit-transform: translateY(20px);
            -khtml-transform: translateY(20px);
            -moz-transform: translateY(20px);
            -ms-transform: translateY(20px);
            -o-transform: translateY(20px);
            transform: translateY(20px)
        }
        100% {
            -webkit-transform: translateY(0px);
            -khtml-transform: translateY(0px);
            -moz-transform: translateY(0px);
            -ms-transform: translateY(0px);
            -o-transform: translateY(0px);
            transform: translateY(0px)
        }
    }

    @-o-keyframes floating {
        0% {
            -webkit-transform: translateY(0px);
            -khtml-transform: translateY(0px);
            -moz-transform: translateY(0px);
            -ms-transform: translateY(0px);
            -o-transform: translateY(0px);
            transform: translateY(0px)
        }
        50% {
            -webkit-transform: translateY(20px);
            -khtml-transform: translateY(20px);
            -moz-transform: translateY(20px);
            -ms-transform: translateY(20px);
            -o-transform: translateY(20px);
            transform: translateY(20px)
        }
        100% {
            -webkit-transform: translateY(0px);
            -khtml-transform: translateY(0px);
            -moz-transform: translateY(0px);
            -ms-transform: translateY(0px);
            -o-transform: translateY(0px);
            transform: translateY(0px)
        }
    }

    @keyframes floating {
        0% {
            -webkit-transform: translateY(0px);
            -khtml-transform: translateY(0px);
            -moz-transform: translateY(0px);
            -ms-transform: translateY(0px);
            -o-transform: translateY(0px);
            transform: translateY(0px)
        }
        50% {
            -webkit-transform: translateY(20px);
            -khtml-transform: translateY(20px);
            -moz-transform: translateY(20px);
            -ms-transform: translateY(20px);
            -o-transform: translateY(20px);
            transform: translateY(20px)
        }
        100% {
            -webkit-transform: translateY(0px);
            -khtml-transform: translateY(0px);
            -moz-transform: translateY(0px);
            -ms-transform: translateY(0px);
            -o-transform: translateY(0px);
            transform: translateY(0px)
        }
    }
</style>
